<template>
	<view class="my-content">
		<view class="my-header">
			<view class="header-left">
				<image src="http://cdn.pandaps.cn/head.png" mode=""></image>
			</view>
			<view class="header-right">
				<view class="header-name">
					Cheney
				</view>
				<view class="header-brief">
					高级前端开发工程师
				</view>
				<view class="header-city">
					上海·浦东新区
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['我的相册', '分类相册'],
				tabindex: 0,
				albumList: [],
				albumList2: [],
				marginTop: 0,
				classChoose: false,
				subList: {}
			}
		},
		created() {
			//let res = uni.getSystemInfoSync();
			// this.marginTop = res.statusBarHeight > 40 ? (res.statusBarHeight * 2 + 1) : (res.statusBarHeight * 3 + 5); //兼容顶部时间固定栏
			
		},
		onUnload() {
			this.tabindex = 0;
		},
		methods: {
			initDataStu() {
				this.$request.get('admin/album/1', {}).then(res => {
					this.albumList = res;
				})
			},
			preview(item) {
				uni.previewImage({
					urls: item // 需要预览的图片http链接列表
				})
			},
			tabsclick(index) { //tab 切换
				this.tabindex = index;
				if (index == 0) {
					this.initDataStu()
				} else {
					this.initDataClass()
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.my-content {
		.my-header {
			padding: 20px 0 20px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.header-left {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-right {
				flex: 1;
				padding-left: 20px;
				height: 200rpx;

				.header-name {
					font-size: 40rpx;
					font-weight: 550;
					color: #333333;
				}

				.header-brief {
					padding-top: 10px;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}

				.header-city {
					padding-top: 10px;
					font-size: 28rpx;
				}
			}
		}

		.warn {
			.load-more {
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-size: 13px;
				color: #CCCCCC;
			}

			.tabs {
				height: 40px;
				background: #FFFFFF;
				margin: 0 20px;
				padding: 17px;

				ul {
					display: flex;
					border-bottom: 1px solid #E5E5E5;

					li {
						height: 40px;
						line-height: 40px;
						flex: 1;
						font-family: PingFangSC-Regular;
						font-size: 15px;
						color: #999999;
						letter-spacing: 0;
						text-align: center;
						list-style-type: none;
					}

					li.active {
						position: relative;
						font-family: PingFangSC-Medium;
						font-size: 15px;
						color: #223662;
						letter-spacing: 0;
						text-align: center;
						height: 40px;
						line-height: 40px;
					}

					.active::after {
						content: '';
						width: 30px;
						height: 2px;
						background: #223662;
						position: absolute;
						left: 50%;
						bottom: 0;
						margin-left: -15px;
					}
				}
			}

			.content {
				margin: 0 5vw;
				background-color: #FFFFFF;

				.img-group {
					width: auto;
					height: auto;

					.title {
						width: 100%;
						height: 30px;
						line-height: 30px;
						font-size: 14px;
						background-color: #FFFFFF;
						position: sticky;
						top: 69px;
						z-index: 5;
					}

					.right {
						display: flex;
						justify-content: space-between;

						.txt {
							color: #999999;
							font-size: 13px;
						}
					}

					.img-container {
						width: 100%;

						.img-box-cont {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: space-between;
							align-items: center;

							.img-box {
								width: 40vw;
								margin-bottom: 10vh;
								float: left;

								.radio-group {
									position: relative;

									.radio {
										position: absolute;
										left: 5px;
									}
								}

								// border: 1px solid #CCCCCC;
								image {
									width: 40vw;
								}
							}
						}

						// .img-box:nth-last-child(1) {
						//   background-color: #0BB20C;
						// }
					}
				}

				.button-submit {
					padding: 25px;
					text-align: center;
					position: sticky;
					bottom: 15px;
					z-index: 9999;

					button {
						width: 90%;
						height: 35px;
						line-height: 35px;
						background-color: #223662;
						color: #FFFFFF;
						font-size: 14px;
						border-radius: 20px;
					}
				}

				.text {
					margin: 15px 15px;
					font-size: 13px;
					color: #999999;

				}
			}
		}

	}
</style>
